<?php
/**
 * 页脚模板
 */
?>

<footer class="bg-white border-t border-gray-100 pt-12 pb-8 mt-8">
    <div class="max-w-7xl mx-auto px-4">
        <!-- 页脚主要内容区 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
            <!-- 品牌介绍 -->
            <div class="space-y-4">
                <div class="flex items-center space-x-3">
                    <!-- Logo -->
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                        <span class="text-white text-lg font-bold">
                            <?php echo substr(get_bloginfo('name'), 0, 1); ?>
                        </span>
                    </div>
                    <!-- 站点名称 -->
                    <span class="text-lg font-semibold text-gray-900">
                        <?php bloginfo('name'); ?>
                    </span>
                </div>
                <p class="text-sm text-gray-500 leading-relaxed">
                    <?php bloginfo('description'); ?>
                </p>
                <!-- 社交媒体链接 -->
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i data-lucide="github" class="w-5 h-5"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i data-lucide="twitter" class="w-5 h-5"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i data-lucide="youtube" class="w-5 h-5"></i>
                    </a>
                </div>
            </div>

            <!-- 快速链接 -->
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">快速链接</h3>
                <ul class="space-y-2">
                    <li>
                        <a href="/about" class="text-sm text-gray-500 hover:text-blue-600 transition-colors">关于我们</a>
                    </li>
                    <li>
                        <a href="/contact" class="text-sm text-gray-500 hover:text-blue-600 transition-colors">联系我们</a>
                    </li>
                    <li>
                        <a href="/privacy" class="text-sm text-gray-500 hover:text-blue-600 transition-colors">隐私政策</a>
                    </li>
                    <li>
                        <a href="/terms" class="text-sm text-gray-500 hover:text-blue-600 transition-colors">服务条款</a>
                    </li>
                </ul>
            </div>

            <!-- 开发者 -->
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">开发者</h3>
                <ul class="space-y-2">
                    <li>
                        <a href="/api-docs" class="text-sm text-gray-500 hover:text-blue-600 transition-colors">API 文档</a>
                    </li>
                    <li>
                        <a href="/sdk" class="text-sm text-gray-500 hover:text-blue-600 transition-colors">SDK 下载</a>
                    </li>
                    <li>
                        <a href="/developer" class="text-sm text-gray-500 hover:text-blue-600 transition-colors">开发者中心</a>
                    </li>
                    <li>
                        <a href="/changelog" class="text-sm text-gray-500 hover:text-blue-600 transition-colors">更新日志</a>
                    </li>
                </ul>
            </div>

            <!-- 订阅区域 -->
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">订阅更新</h3>
                <p class="text-sm text-gray-500 mb-4">订阅我们的新闻通讯，获取最新更新和独家内容。</p>
                <form class="space-y-2">
                    <div class="relative">
                        <input type="email" 
                               class="w-full px-4 py-2 text-sm
                                      bg-gray-50 border border-gray-200
                                      rounded-lg
                                      placeholder:text-gray-400
                                      focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500/30"
                               placeholder="输入您的邮箱">
                    </div>
                    <button type="submit" 
                            class="w-full px-4 py-2 text-sm font-medium text-white
                                   bg-blue-600 hover:bg-blue-700
                                   rounded-lg transition-colors
                                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        订阅
                    </button>
                </form>
            </div>
        </div>

        <!-- 分隔线 -->
        <div class="border-t border-gray-100 pt-8">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                <!-- 版权信息 -->
                <div class="text-sm text-gray-500">
                    © <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.
                </div>

                <!-- 底部链接 -->
                <nav class="flex items-center space-x-6">
                    <?php
                    wp_nav_menu(array(
                        'theme_location' => 'footer',
                        'menu_id' => 'footer-menu',
                        'menu_class' => 'flex items-center space-x-6',
                        'container' => false,
                        'depth' => 1,
                        'link_before' => '<span class="text-sm text-gray-500 hover:text-gray-700 transition-colors">',
                        'link_after' => '</span>'
                    ));
                    ?>
                </nav>
            </div>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>

<script>
    // 初始化 Lucide 图标
    lucide.createIcons();
</script>
</body>
</html> 